import Vue from 'vue';
import _Car from './car.vue';
export class Slider{
  slider = null;
  constructor(options) {
    this.self =  this;
    this.speed = options.speed;
    this.timer = null;
    this.curIndex = 0;
    this.runEvent = this.run.bind(this);
    this.init.apply(this);
    this.indicatorItems = document.querySelectorAll('.indicator-item');
    this.carItemWidth = 690;
    this.autoPlay();
  }


  init() {
    let self = this;
    let slider = Vue.extend(_Car);
    this.slider = new slider({
      data() {
        return {}
      },
      methods: {
        prev() {
          self._slideAction('prev');
          self._pageChange(self.curIndex);
        },
        next() {
          self._slideAction('next');
          self._pageChange(self.curIndex);
        },
      },
    }).$mount(document.createElement('div'));
    document.getElementById('homeView').appendChild(self.slider.$el);
    self.cloneItem();
  }
  remove() {
    document.getElementById('homeView').removeChild(this.slider.$el);
    this.slider = null;
  }

  cloneItem () {
    this.carItems = document.querySelectorAll('.car-item');
    this.firstCar = this.carItems[0].cloneNode(true);
    this.carList = document.querySelector('.car-list');
    this.carList.appendChild(this.firstCar);
  }

  autoPlay() {
    setInterval(this.runEvent, this.speed)
  }

  run () {
    this._slideAction('next');
    this._pageChange(this.curIndex);
  }

  _slideAction (dir) {
    let classList = this.carList.classList,
        classListArr = Array.from(this.carList.classList);
    switch (dir) {
      case 'next':
        if (this.curIndex == this.carItems.length) {
          this.curIndex = 1;
          classListArr.includes('pointFive') && classList.remove('pointFive');
          classList.add('initial');
          this.carList.style.transform = `translate3d(${-this.curIndex*this.carItemWidth}px, 0px, 0px)`;
        } else {
          this.curIndex ++;
          classListArr.includes('initial') && classList.remove('initial');
          classList.add('pointFive');
          this.carList.style.transform = `translate3d(${-this.curIndex*this.carItemWidth}px, 0px, 0px)`
        }
        break;

      case 'prev':
        if (this.curIndex == 0) {
          this.curIndex = this.carItems.length - 1;
          classListArr.includes('pointFive') && classList.remove('pointFive');
          classList.add('initial');
          this.carList.style.transform = `translate3d(${-this.curIndex*this.carItemWidth}px, 0px, 0px)`;
        } else {
          this.curIndex --;
          classListArr.includes('initial') && classList.remove('initial');
          classList.add('pointFive');
          this.carList.style.transform = `translate3d(${-this.curIndex*this.carItemWidth}px, 0px, 0px)`
        }
        break;
    
      default:
        break;
    }
  }

  _pageChange (index) {
    if(index == this.carItems.length) {
      index = 0;
    }
    let indicatorItemsArr = Array.from(this.indicatorItems);
    indicatorItemsArr.map(item => {
      item.classList.remove('active');
    })
    this.indicatorItems[index].classList.add('active');
  }
}